<template>
  <div class="mars-viewer-container">
    <iframe
      ref="marsIframe"
      :src="iframeSrc"
      frameborder="0"
      width="100%"
      height="100%"
      @load="onIframeLoad"
      name="mars-iframe"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const marsIframe = ref<HTMLIFrameElement>()
const iframeSrc = ref(`${import.meta.env.BASE_URL}mars-frontend/index.html`)

// 存储侧边栏状态，默认为展开状态
let isSidebarCollapsed = false

const onIframeLoad = () => {
  console.log('Mars viewer iframe loaded')

  // 添加 message 事件监听器，接收来自父窗口的消息
  const handleMessage = (event: MessageEvent) => {
    // 建议验证消息来源，防止XSS攻击
    // if (event.origin !== 'https://your-allowed-origin.com') return

    console.log('Received message from parent:', event.data)
    
    // 处理父窗口发送的消息
    const { type, payload } = event.data
    switch (type) {
      case 'INIT_DATA':
        console.log('Initialization data received:', payload)
        // 初始化逻辑
        break
      case 'UPDATE_VIEW':
        console.log('Updating view:', payload)
        // 更新视图等操作
        break
      case 'TOGGLE_LEFT_SIDEBAR':
        console.log('Toggling left sidebar:', payload)
        toggleLeftSidebar(payload?.isCollapsed)
        break
      default:
        console.warn('Unknown message type:', type)
    }
  }

  // 添加事件监听器
  window.addEventListener('message', handleMessage)

  // 在组件卸载前移除事件监听器
  onBeforeUnmount(() => {
    window.removeEventListener('message', handleMessage)
  })
  
  // 初始化时确保侧边栏为展开状态
  setTimeout(() => {
    toggleLeftSidebar(false)
  }, 100)
}

// 切换左侧边栏的展开和收起状态，添加动画效果
const toggleLeftSidebar = (collapse?: boolean) => {
  if (!marsIframe.value?.contentWindow) return

  // 如果传入了collapse参数，则直接设置为指定状态
  // 否则切换当前状态
  if (typeof collapse === 'boolean') {
    isSidebarCollapsed = collapse
  } else {
    isSidebarCollapsed = !isSidebarCollapsed
  }

  // 查找侧边导航栏元素
  const sideNavigation = marsIframe.value.contentWindow.document.querySelector('.side-navigation') as HTMLElement
  const accordion = marsIframe.value.contentWindow.document.querySelector('#accordion') as HTMLElement
  
  if (sideNavigation) {
    // 添加动画相关的CSS类和样式
    sideNavigation.style.transition = 'transform 0.3s ease'
    sideNavigation.style.willChange = 'transform'
    
    if (isSidebarCollapsed) {
      // 收起侧边导航栏 - 向左滑出
      sideNavigation.style.transform = 'translateX(-100%)'
      // 动画结束后隐藏元素
      setTimeout(() => {
        sideNavigation.style.display = 'none'
      }, 300)
    } else {
      // 展开侧边导航栏 - 先显示再滑入
      sideNavigation.style.display = 'flex'
      // 强制重绘以确保display生效
      sideNavigation.offsetHeight
      // 向右滑入
      sideNavigation.style.transform = 'translateX(0)'
    }
  }
  
  // 只有在侧边栏展开且有面板显示时才显示accordion
  if (accordion) {
    if (isSidebarCollapsed) {
      // 收起面板组
      accordion.style.display = 'none'
    } else {
      // 检查是否有面板正在显示，如果有则显示accordion
      const panels = [
        marsIframe.value.contentWindow.document.getElementById('panel-one'),
        marsIframe.value.contentWindow.document.getElementById('panel-two'),
        marsIframe.value.contentWindow.document.getElementById('panel-three'),
        marsIframe.value.contentWindow.document.getElementById('panel-four')
      ];
      
      const isAnyPanelVisible = panels.some(panel => panel && panel.style.display === 'block');
      if (isAnyPanelVisible) {
        accordion.style.display = 'block';
      }
    }
  }
}

onMounted(() => {
  // 组件挂载后的初始化逻辑
  console.log('Mars viewer component mounted')
})
</script>

<style scoped>
.mars-viewer-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.mars-viewer-container iframe {
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}
</style>